import React, { useEffect, useState }  from 'react';
import '../../node_modules/@antv/s2-react/dist/style.min.css';
import insertCss from 'insert-css';
import { SheetComponent,Switcher } from '@antv/s2-react';

insertCss(`
  .antv-s2-switcher-item.checkable-item {
    align-items: center;
  }
`);
//维度切换组件 --实现交互式行列切换，以及维度隐藏的功能Switcher
const Test2 = () => {
    const [data, setDataCfg] = useState([]);
    const defaultFields = {
        rows: ['province', 'city'],
        columns: ['type'],
        values: ['price', 'price-ac', 'price-rc', 'cost', 'cost-ac', 'cost-rc'],
    };
    const defaultSwitcherFields = {
        rows: {
            items: [{ id: 'province' }, { id: 'city' }],
        },
        columns: {
            items: [{ id: 'type' }],
        },
        values: {
            expandable: true,
            selectable: true,
            items: [
                { id: 'price', children: [{ id: 'price-ac' }, { id: 'price-rc' }] },
                { id: 'cost', children: [{ id: 'cost-ac' }, { id: 'cost-rc' }] },
            ],
        },
    };
    const [fields, setFields] = useState(defaultFields);
    const [switcherFields, setSwitcherFields] = useState(
        defaultSwitcherFields,
    );

    useEffect(() => {
        getdata();
    }, []);
    const getdata = () => {
        fetch(
            'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
        ).then((res) => res.json()).then((data) => {
            setDataCfg(data.data)
            setFields(data.fields)
        });
    }
    
    // 3. 添加配置
    const s2Options = {
        width: 600,
        height: 200,
        interaction: {
            enableCopy: true,
            copyWithHeader: true,//copyWithHeader: 复制数据是否带表头信息，默认为 false
          },
          pagination: {//分页
            pageSize: 4,
            current: 1,
          },
    };
  
    const onSubmit = (result) => {
        setFields(generateFields(result));
        setSwitcherFields(generateSwitcherFields(result));
    };
  
    // 生成 switcher 所需要的 fields 结构
    function generateSwitcherFields(updatedResult) {
        const values = updatedResult.values.items.reduce((result, item) => {
            if (defaultSwitcherFields.values.items.find((i) => i.id === item.id)) {
                result.push(item);
            } else {
                const parent = result[result.length - 1];
                parent.children = parent.children ? parent.children : [];
                parent.children.push(item);
            }
            return result;
        }, []);

        return {
            rows: { items: updatedResult.rows.items },
            columns: { items: updatedResult.columns.items },
            values: {
                selectable: true,
                expandable: true,
                items: values,
            },
        };
    }

    // 生成 dataCfg fields 结构
    function generateFields(updatedResult) {
        return {
            rows: updatedResult.rows.items.map((i) => i.id),
            columns: updatedResult.columns.items.map((i) => i.id),
            values: updatedResult.values.items
            .filter((i) =>!updatedResult.values.hideItems.find((hide) => hide.id === i.id),)
            .map((i) => i.id),
        };
    }
    return (
        <div>
            <Switcher
              {...switcherFields}
              // 是否允许指标在行列维度之间相互切换
              allowExchangeHeader={true}
              onSubmit={onSubmit}
            />
            <SheetComponent
                showPagination
                sheetType={'pivot'}
                adaptive={false}
                dataCfg={{ data, fields }}
                options={s2Options}
                header={{
                    exportCfg: {//导出
                        open: true
                    }
                }}
            />
        </div>
    );
}


export default Test2;
